<style>
    #preview img{
        width: 100%;
    }
</style>

<div class="layui-form-item">
    <label class="layui-form-label"><?php echo $field['title']; ?></label>
    <div class="layui-input-inline">      

        <image id="<?php echo $field['name']; ?>" class="dragFile openbox_big" 
             data-hidden="<?php echo $field['name']; ?>_hidden"
             href="<?php echo url('admin/res/index') ?>?hidden=<?php echo $field['name']; ?>_hidden&thumb=<?php echo $field['name']; ?>"        
             style="padding: 20px; border: 1px dashed #e2e2e2;  text-align: center; color: #999"
             src="<?php
            if ($field['result']) {
                echo img_resize($field['result'], 240, 0);
            } else {                
                echo  APP_HOST.APP_URL.DIRECTORY_SEPARATOR.'/static/admin/images/image_upload.jpg';
            }
            ?>"

        />
        <p id="log"></p>
        <input type="hidden" id="<?php echo $field['name']; ?>_hidden" name="<?php echo $field['name']; ?>" value="<?php echo $field['result']; ?>" />
    </div>
    <div class="layui-form-mid layui-word-aux">  </div>
</div>



<script>

    $(function () {


        //拖拽上传文件
        const dragbox = document.querySelector('.dragFile');
        var preview = document.getElementById('<?php echo $field['name']; ?>');
        dragbox.addEventListener('dragover', function (e) {
            e.preventDefault(); // 必须阻止默认事件
        }, false);
        dragbox.addEventListener('drop', function (e) {
            e.preventDefault(); // 阻止默认事件
            var file = null,
                    data = e.dataTransfer.types;
            for (var i = 0; i < data.length; i += 1) {
                if (data[i] === 'Files') {
                    file = e.dataTransfer.files; //获取文件
                    break;
                } else {
                    var text = e.dataTransfer.getData('text/plain');
                    $('.dragFile').append(text); //将拖拽的文字添加到容器里
                    break;
                }
            }
            if (file && file[0].type.indexOf('image') !== -1) {
                
                // 如果需要预览，可以执行下面代码
                var reader = new FileReader()
                reader.onload = function (event) {
                    preview.src =  event.target.result;
                }
                reader.readAsDataURL(file[0]);
                // 如果不需要预览，上面这段可以忽略
                
                var formData = new FormData();
                formData.append('file', file[0]); //上传单个文件的添加方式
                upload(formData); //upload 异步上传
            }
        }, false);


        $(".dragFile").on('paste', function (ev) {
            var file = null,
                    data = (event.clipboardData || window.clipboardData).items;
            for (var i = 0; i < data.length; i += 1) {
                if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) {
                    data[i].getAsString(function (str) {
                        $('.dragFile').append(str); //容器里追加拷贝的文字
                    })
                    break;
                } else if ((data[i].kind == 'file') && (data[i].type.match('^image/'))) {
                    file = data[i].getAsFile(); //读取图片文件
                    break;
                }
            }
            if (file) {
                
                // 如果需要预览，可以执行下面代码
                var reader = new FileReader()
                reader.onload = function (event) {
                    preview.src = event.target.result;
                }
                reader.readAsDataURL(file);
                // 如果不需要预览，上面这段可以忽略
                
                var formData = new FormData();
                formData.append('file', file); //上传单个文件的添加方式
                upload(formData); //异步上传文件
            }
        });


        function upload(formData) {
            if (formData.length < 1) {
                return; //阻止上传，也可以写提示语
            }
            $.ajax({
                url: '<?php echo url('admin/res/image_paste_upload') ?>', //上传的路径
                type: "POST",
                data: formData,
                processData: false, //阻止jQuery 序列化
                contentType: false,
                dataType: "json", //返回格式
                beforeSend: function () {
                    //这里可以加一些上传前的特效，用于改善用户体验
                },
                success: function (res) {
                    console.table(res);
                    if (res.code) {
                        //上传失败的事件
                        layer.msg(res.msg);
                        
                    } else {
                        layer.msg("上传成功")
                        //上传成功后的事件
                        $('#<?php echo $field['name']; ?>_hidden').val(res.data.src);
                    }
                },
                complete: function () {
                    //上传完成后的事件
                },
                error: function (res) {
                    console.log(res);
                }
            });
        }








//        document.addEventListener('paste', function (event) {
//            var items = (event.clipboardData || window.clipboardData).items;
//            var file = null;
//            if (items && items.length) {
//                // 搜索剪切板items
//                for (var i = 0; i < items.length; i++) {
//                    if (items[i].type.indexOf('image') !== -1) {
//                        file = items[i].getAsFile();
//                        break;
//                    }
//                }
//            } else {
//                log.innerHTML = '<span style="color:red;">当前浏览器不支持</span>';
//                return;
//            }
//            if (!file) {
//                log.innerHTML = '<span style="color:red;">粘贴内容非图片</span>';
//                return;
//            }
//            // 此时file就是我们的剪切板中的图片对象
//            // 如果需要预览，可以执行下面代码
//            var reader = new FileReader()
//            reader.onload = function (event) {
//                preview.innerHTML = '<img src="' + event.target.result + '" class="upload-image">';
//            }
//            reader.readAsDataURL(file);
//            // 如果不需要预览，上面这段可以忽略
//
//            // 这里是上传
//            var xhr = new XMLHttpRequest();
//            // 上传进度
//            if (xhr.upload) {
//                xhr.upload.addEventListener('progress', function (event) {
//                    log.innerHTML = '正在上传，进度：' + Math.round(100 * event.loaded / event.total) / 100 + '%';
//                }, false);
//            }
//            // 上传结束
//            xhr.onload = function () {
//                var responseText = xhr.responseText;
//
//                if (responseText === '') {
//                    log.innerHTML = '上传失败';
//                } else {
//                    $('#<?php echo $field['name']; ?>').val(responseText);
//                    log.innerHTML = '上传成功，地址是：' + responseText;
//                }
//
//            };
//            xhr.onerror = function () {
//                log.innerHTML = '<span style="color:red;">网络异常，上传失败</span>';
//            };
//            xhr.open('POST', '<?php echo url('admin/res/image_paste_upload') ?>', true);
//            xhr.setRequestHeader('FILENAME', encodeURIComponent(file.name));
//            xhr.send(file);
//        });

    });

</script>